<script lang="ts" setup>
import type { Toc } from '~/components/markdown/plugins';

defineProps<{
	toc: Toc[];
}>();

const depthStyle = (depth: number) => {
	switch (depth) {
		case 1:
			return 'font-black';
		case 2:
			return 'font-medium ml-3';
		case 3:
			return 'font-light ml-6';
		default:
			return 'font-light ml-9';
	}
};
</script>

<template>
	<div class="flex-shrink-0 flex-col gap-1.5 h-fit rounded-lg sticky top-[130px] lg:flex hidden max-w-[200px]">
		<ul
			class="toc bg-white p-2 rounded-xl"
		>
			<li
				v-for="item in toc"
				:key="item.href"
			>
				<a
					:class="[depthStyle(item.depth)]"
					:href="item.href"
				>

					{{ item.value }}
				</a>
			</li>
		</ul>
	</div>
</template>

<style scoped>
.toc, .toc ul {
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}

.toc ul li {
  margin-top: 2px;
  margin-left: 1em;
}
</style>
